<template>
    <view>
        <view class="order-list">
            <view class="order-hd flex flex-a flex-b">
                <view class="left">我的订单</view>
                <view class="right flex-a" @click="jumpTo('/pages/orderList/index?status=99')">
                    <text>全部</text>
                    <Right size="12" />
                </view>
            </view>
            <view class="order-bd">
                <block v-for="(item, index) in orderMenu" :key="index">
                    <div class="order-item" @click="jumpTo(item.url)">
                        <view class="pic">
                            <image :src="item.img" mode=""></image>
                            <text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
                        </view>
                        <view class="txt">{{ item.title }}</view>
                    </div>
                </block>
            </view>
        </view>
        <view class="user-menus">
            <view class="menu-title">系统功能</view>
            <view class="list-box">
                <block v-for="(item, index) in MyMenus" :key="index">
                    <navigator class="item" :url="item.url" hover-class="none"
                        v-if="item.name != '客服' && item.name != '附近商家'">
                        <!-- v-if="!(item.url =='/pages/service/index' || (item.url =='/pages/users/user_spread_user/index' && !userInfo.isPromoter))" -->
                        <image :src="item.pic"></image>
                        <text>{{ item.name }}</text>
                    </navigator>
                    <nut-button open-type="contact" v-if="item.name == '客服'" class="item">
                        <div>
                            <image :src="item.pic"></image>
                        </div>
                        <div><text>{{ item.name }}</text></div>
                    </nut-button>
                    <div class="item" v-if="item.name == '附近商家'" @click="openToast('', '店铺装修中，敬请期待。')">
                        <image :src="item.pic"></image>
                        <text>{{ item.name }}</text>
                    </div>
                </block>
            </view>
        </view>
        <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
    </view>
</template>

<script lang="ts">
import Taro, { } from '@tarojs/taro'
import { reactive, toRefs, onMounted } from 'vue';
import mitt from "../../../utils/mitt";
import { Right } from '@nutui/icons-vue-taro';
import { Cell, CellGroup } from '@nutui/nutui';
export default {
    components: {
        'nut-cell': Cell,
        'nut-cell-group': CellGroup,
        Right
    },
    setup() {
        const state = reactive({
            list: [
                {
                    shop_number: 0
                }
            ],
            msg: '',
            show: false,
            type: 'text',
            cover: false,
            user: {},
            orderMenu: [{
                img: 'https://s21.ax1x.com/2025/03/06/pEY5ydJ.png',
                title: '待付款',
                url: '/pages/orderList/index?status=0',
                num: 0
            }, {
                img: 'https://s21.ax1x.com/2025/03/06/pEY5giR.png',
                title: '待发货',
                url: '/pages/orderList/index?status=2',
                num: 0
            },
            {
                img: 'https://s21.ax1x.com/2025/03/06/pEY56o9.png',
                title: '待收货',
                url: '/pages/orderList/index?status=3',
                num: 0
            },
            {
                img: 'https://s21.ax1x.com/2025/03/06/pEY52J1.png',
                title: '评价',
                url: '/pages/orderList/index?status=1',
                num: 0
            },
            {
                img: 'https://s21.ax1x.com/2025/03/06/pEY5RRx.png',
                title: '售后',
                url: '/pages/orderList/index?status=-1',
                num: 0
            },
            ],
            MyMenus: [
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYf0MD.png',
                    name: '收货地址',
                    url: '/packageA/pages/addressList/index'
                },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYfydA.png',
                    name: '收藏中心',
                    url: '/packageA/pages/collectPage/index'
                },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYfDqH.png',
                    name: '优惠券',
                    url: '/packageA/pages/couponList/index'
                },
                // {
                //     pic: 'https://cxj.szzkba.cn/upload/i/2024/09/19/153914_1.png',
                //     name: '附近商家',
                //     url: ''
                // },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYfgit.png',
                    name: '分销中心',
                    url: '/packageA/pages/distributList/index'
                },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYf5LQ.png',
                    name: '我的商品',
                    url: '/packageA/pages/goodsList/index'
                },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYfYI1.png',
                    name: '客服',
                    url: ''
                },
                {
                    pic: 'https://s21.ax1x.com/2025/03/06/pEYfRRf.png',
                    name: '意见反馈',
                    url: '/packageA/pages/feedback/index'
                },

            ],
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data
                    if (res.data.role == 201) {
                        state.MyMenus.splice(4, 1)
                    } else if (res.data.role == 222) {
                        state.MyMenus.splice(3, 1)
                    } else if (res.data.role == '' || res.data.role == null) {
                        state.MyMenus.splice(3, 2)
                    }
                },
                fail: function (re) {
                    state.MyMenus.splice(3, 2)
                }
            })
        })
        const jumpTo = (path) => {
            Taro.switchTab({ url: path })
        }
        const showToast = (msg) => {
            state.msg = msg
            state.show = true
        }
        const loginOut = () => {
            Taro.showModal({
                title: '提示',
                content: '是否确认退出登录？',
                success: function (res) {
                    if (res.confirm) {
                        Taro.clearStorage()
                        Taro.navigateTo({ url: '/pages/mypage/index?name=myPage' })
                        mitt.emit("hasLogin", false)
                    }
                }
            })
        }
        const openToast = (type, msg, cover = false) => {
            state.show = true
            state.msg = msg
            state.type = type
            state.cover = cover
            state.title = title
            state.bottom = bottom
            state.center = center
        }
        return {
            ...toRefs(state), jumpTo, showToast, loginOut, openToast
        };
    }
};
</script>

<style lang="scss">
.nut-row {
    overflow: hidden;

}


.flex-content {
    margin: 5% auto 0;
    width: 90%;
    align-items: center;
    background-color: white;
}

.flex-link-font {
    font-size: 24px;
    color: #8a8a8a;
}

.order-hd {
    justify-content: space-between;
    font-size: 30rpx;
    color: #282828;
    margin-bottom: 40rpx;
    padding: 0 16rpx;

    .left {
        padding: 30rpx 30rpx 40rpx;
        font-size: 30rpx;
        color: #282828;
        font-weight: 600;
    }

    .right {
        align-items: center;
        color: #999;
        font-size: 28rpx;

        .icon-xiangyou {
            margin-left: 5rpx;
            font-size: 24rpx;
        }
    }
}

.order-bd {
    display: flex;
    justify-content: space-between;
    padding: 0 50rpx;

    .order-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .pic {
            position: relative;
            text-align: center;

            image {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .txt {
            margin-top: 5rpx;
            font-size: 26rpx;
            color: #454545;
        }
    }
}

.order-list {
    width: 92%;
    margin: 20rpx auto 20rpx;
    background: #fff;
    padding: 10rpx 10rpx 20rpx;
    box-sizing: border-box;
}

.user-menus {
    width: 92%;
    margin: 0 auto;
    background: #fff;
    padding: 10rpx 10rpx 20rpx;
    box-sizing: border-box;

    .menu-title {
        padding: 30rpx 30rpx 40rpx;
        font-size: 30rpx;
        color: #282828;
        font-weight: 600;
    }

    .list-box {
        display: flex;
        flex-wrap: wrap;
        padding: 0;

        .nut-button--default {
            border-color: transparent !important;
            background: transparent !important;
            padding: 0 !important;
            width: 25%;
            height: 100rpx;
            position: relative;
            top: -5rpx;

            div {
                white-space: nowrap;
                width: 100rpx;
                height: 40rpx;
            }
        }
    }

    .item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        width: 25%;
        margin-bottom: 47rpx;
        font-size: 26rpx;
        color: #333333;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 18rpx;
        }


        &:last-child::before {
            display: none;
        }
    }

    button {
        font-size: 28rpx;
    }
}
</style>